<template>
<div class="wrapper">
  <swiper :options="swiperOption" v-if="swiperer.length">
    <!-- slides -->
    <swiper-slide v-for="item of swiperer" :key="item.id">

      <img :src="item.imgUrl" class="lunbotu"/>

    </swiper-slide>


    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>

  </swiper>



</div>
</template>

<script>
    export default {
      name: "Swiperswiper",
      props:{
        swiperer:Array
      },
      data() {
        return {
          swiperOption: {
            // 小圆点
            pagination: '.swiper-pagination',
            autoplay: 3000,
            loop:true
          },
          // swiperList:[{
          //   id:"001",
          //   img_src:'http://img1.qunarzz.com/piao/fusion/1812/d6/daa880b254940402.jpg_750x200_b114308a.jpg'
          // },{
          //   id:"002",
          //   img_src:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20192/9f73976e40c4ef845cabe0efc0269ebb.jpg_750x200_aab92b7a.jpg'
          // },
          // {
          //     id:"003",
          //     img_src:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/f4c1844c0a06ae46a11bc3c0f17c0b47.jpg_750x200_93c515e4.jpg'
          // }
          //
          // ]
        }
      },






    }
</script>

<style scoped lang="stylus">
 .wrapper >>> .swiper-pagination-bullet-active
  background #fff
 .wrapper
   overflow hidden
   width 100%
   height 0
   padding-bottom 29%
  .lunbotu
   width 100%







</style>
